<section>
  <nz-card [nzBordered]="false">
    <form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()">
      <nz-form-item>
        <nz-form-control>
          <nz-input-group [nzPrefix]="prefixUser">
            <input type="text" nz-input formControlName="username" placeholder="用户名">
          </nz-input-group>
          <nz-form-explain *ngIf="validateForm.get('username').dirty && validateForm.get('username').hasError('required')">您好，请输入用户名！</nz-form-explain>
          <nz-form-explain *ngIf="validateForm.get('username').dirty && validateForm.get('username').hasError('minlength') || validateForm.get('username').hasError('maxlength')">您好，用户名的长度为4-20位！</nz-form-explain>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-control>
          <nz-input-group [nzPrefix]="prefixLock">
            <input type="password" nz-input formControlName="password" placeholder="密码">
          </nz-input-group>
          <nz-form-explain *ngIf="validateForm.get('password').dirty && validateForm.get('password').hasError('required')">您好，请输入密码！</nz-form-explain>
          <nz-form-explain *ngIf="validateForm.get('password').dirty && validateForm.get('password').hasError('minlength') || validateForm.get('password').hasError('maxlength')">您好，密码的长度为6-18位！</nz-form-explain>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-control>
          <nz-input-group [nzPrefix]="prefixLock">
            <input type="text" nz-input formControlName="authcode" placeholder="验证码">
          </nz-input-group>
          <nz-form-explain *ngIf="validateForm.get('authcode').dirty && validateForm.get('authcode').hasError('required')">您好，请输入验证码！</nz-form-explain>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-control>
          <button nz-button [nzType]="'primary'">登&nbsp;录</button>
        </nz-form-control>
      </nz-form-item>
    </form>
    <ng-template #prefixUser><i nz-icon type="user"></i></ng-template>
    <ng-template #prefixLock><i nz-icon type="lock"></i></ng-template>
    <ng-template #prefixKey><i nz-icon type="key"></i></ng-template>
  </nz-card>
</section>
